<!--
 *@开发者: 刘翔
 *@创建时间: 2024-12-3 10:54:29
 *@描述:超支排名第3科室 {科室名称}-医疗服务效率变化趋势
!-->
<template>
  <div class="page-title-15-20">
    <div ref="pageTitle15_20TopRefs" class="page-title-15-20-top"></div>
    <div class="page-title-15-20-bottom">
      <div class="card-data">
        <div :class="['arrow', card3.state ? 'arrow-top' : 'arrow-bottom']"></div>
        <div>
          次均费用为
          <span class="color-tips">{{ card2.num }}元</span>
          <br />
          {{ card2.describe }}
        </div>
      </div>
      <div class="card-data">
        <div :class="['arrow', card3.state ? 'arrow-top' : 'arrow-bottom']"></div>
        <div>
          平均住院天数
          <span class="color-tips">{{ card3.num }}天</span>
          <br />
          {{ card3.describe }}
        </div>
      </div>
      <div class="card-data">
        <div :class="['arrow', card3.state ? 'arrow-top' : 'arrow-bottom']"></div>
        <div>
          C M I
          <span class="color-tips">{{ card1.num }}</span>
          <br />
          {{ card1.describe }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  // 组件名称
  name: 'pageTile15_20',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      card1: {},
      card2: {},
      card3: {},
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    init(data) {
      let data_list = data.data_list;
      let desc = data.desc;
      //图表
      this.echartsInit(data_list);
      //内容
      this.cardData(desc);
    },
    echartsInit(data_list) {
      this.data_list = data_list;
      let myChart = echarts.init(this.$refs.pageTitle15_20TopRefs);
      let option;
      const colors = ['#5470c6', '#ffb672', '#9fe080'];
      option = {
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        legend: {
          data: ['均次费用', 'CMI', '平均住院天数'],
          textStyle: {
            fontSize: 18,
          },
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              show: true,
              fontSize: 18,
              formatter: function (value) {
                var maxLength = 10; // 每行显示的最大字符数
                var result = '';
                for (var i = 0; i < value.length; i++) {
                  result += value[i];
                  if ((i + 1) % maxLength === 0) {
                    result += '\n'; // 每maxLength字符换行
                  }
                }
                return result;
              },
            },
            // prettier-ignore
            data: [],
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '均次费用',
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: true,
            },
            axisLabel: {
              show: true,
              fontSize: 18,
              color: colors[0],
            },
            nameTextStyle: {
              fontSize: 18,
            },
          },
          {
            type: 'value',
            name: 'CMI',
            position: 'right',
            alignTicks: true,
            axisLine: {
              show: true,
            },
            axisLabel: {
              show: true,
              fontSize: 18,
              color: colors[1],
            },
            nameTextStyle: {
              fontSize: 18,
            },
          },
          {
            type: 'value',
            name: '平均住院天数',
            position: 'right',
            offset: 80,
            alignTicks: true,
            axisLine: {
              show: true,
            },
            axisLabel: {
              show: true,
              fontSize: 18,
              color: colors[2],
            },
            nameTextStyle: {
              fontSize: 18,
            },
          },
        ],
        series: [
          {
            name: '均次费用',
            type: 'bar',
            yAxisIndex: 0,
            barMaxWidth: 50,
            data: [],
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
              formatter: function (params) {
                var colorStyle = params.value > 0 ? 'c' : 'd';
                return `{${colorStyle}|${params.value}}`;
              },
              rich: {
                c: {
                  color: '#5470c6',
                  fontSize: 18,
                },
                d: {
                  color: '#ee6666',
                  fontSize: 18,
                },
              },
            },
          },
          {
            name: 'CMI',
            type: 'line',
            yAxisIndex: 1,
            data: [],
            barMaxWidth: 50,
            label: {
              show: true,
              fontSize: 18,
              textBorderWidth: 3,
            },
          },
          {
            name: '平均住院天数',
            type: 'line',
            yAxisIndex: 2,
            data: [],
            label: {
              show: true,
              fontSize: 18,
              textBorderWidth: 3,
            },
          },
        ],
      };
      data_list.forEach((item, index) => {
        option.xAxis[0].data.push(item['月份']);
        option.series[0].data.push(item['均次费用']);
        option.series[1].data.push(item['CMI']);
        option.series[2].data.push(item['平均住院天数']);
      });
      option && myChart.setOption(option);
    },
    //卡片内容
    cardData(desc) {
      this.card1 = {
        num: desc['cmi'],
        describe: desc['cmi描述'],
        state: desc['cmi类型'].includes('上升'),
      };
      this.card2 = {
        num: desc['例均费用'],
        describe: desc['例均费用描述'],
        state: desc['例均费用类型'].includes('上升'),
      };
      this.card3 = {
        num: desc['平均住院天数'],
        describe: desc['平均住院天数描述'],
        state: desc['平均住院天数类型'].includes('上升'),
      };
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.page-title-15-20 {
  position: relative;
  height: 100%;
  .page-title-15-20-top {
    margin-bottom: 50px;
    height: 68%;
  }
  .cost {
    display: flex;
    flex-direction: column;
    align-items: left;
    position: absolute;
    right: 0;
    top: 25%;
    font-size: 18px;
    font-weight: 600;
    z-index: 99999;
    .cost-title {
      transform: rotate(90deg);
      transform-origin: top;
    }
    .cost-title-1 {
      margin: auto;
      height: 2px;
      transform: rotate(90deg);
    }
    .cost-title-2 {
      margin: auto;
      height: 2px;
      transform: rotate(90deg);
    }
  }
  .page-title-15-20-bottom {
    display: flex;
    justify-content: center;
    .card-data {
      margin: 0 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 220px;
      min-width: 500px;
      font-size: 1.7rem;
      background: #fff2ca;
      border-radius: 32px;
      border: 1px solid #000;
      .arrow {
        margin-right: 20px;
      }
      .arrow-top {
        width: 80px;
        height: 50px;
        -webkit-clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
        clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
        background: #4874cb;
        transform: rotate(90deg);
      }
      .arrow-bottom {
        width: 80px;
        height: 50px;
        -webkit-clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
        clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
        background: #4874cb;
        transform: rotate(-90deg);
      }
      .color-tips {
        color: #ff1310;
      }
    }
  }
}
</style>
